<template>
	<view class="content">
		<view v-if="loading" class="loading">加载中...</view>
		<view v-else-if="data.length === 0" class="empty">暂无工单数据</view>
		<view v-else class="item-box">
			<view class="item" @click="goToData(item.record_id)" v-for="(item, i) in data" :key="i">
				<view class="message-box-top">
					<p class="p">订单编号：{{item && item.work_number}}</p>
					<p class="p">当前状态：{{item && item.state}}</p>
				</view>
				<view class="message-box">
					<p class="p">订单类型：{{item && item.the_type_of_order}}</p>
					<p class="p">维修产品：{{item && item.repair_the_product}}</p>
				</view>
				<view class="message-box">
					<p class="p">负责人：{{item && item.head}}</p>
					<p class="p">现场联系人：{{item && item.on_site_contacts}}</p>
				</view>
				<view class="message-box">
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import {
		getMaintainList,
	} from '@/api/maitain.js'

	const data = ref([])
	const loading = ref(false)

	const goToData = (id) => {
		uni.navigateTo({
			url: `/model/gongDan/gongDanXiangqingView?id=${id}`
		})
	}

	const _getMaintainList = () => {
		loading.value = true
		getMaintainList()
			.then((res) => {
				console.log(res);
				data.value = res.repair_orders_list || []
			})
			.catch((err) => {
				console.error("请求失败:", err)
				uni.showToast({
					title: "加载失败",
					icon: "none"
				})
			})
			.finally(() => {
				loading.value = false
			})
	}

	onLoad(() => {
		_getMaintainList()
	})

	onShow(() => {
		_getMaintainList()
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 10px;
		min-height: 100vh;
		background-color: rgb(251, 251, 251);

		.loading,
		.empty {
			text-align: center;
			padding: 20px;
			font-size: 28rpx;
			color: #666;
		}

		.item-box {
			.item {
				margin-bottom: 10rpx;
				background-color: white;
				padding: 10rpx;
				border: 1rpx solid gainsboro;
				border-radius: 6rpx;
				
				
				.message-box-top {
					display: flex;
					justify-content: space-between;
				}
				.message-box {
					margin: 10rpx 0;

				}

				.p {
					font-size: 24rpx;
					margin: 4rpx 0;
				}
			}
		}
	}
</style>